/* 浅色主题 */
:root {
  /* 主色调 */
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;

  /* 背景色 */
  --background-color: #f5f7fa;
  --card-background: #ffffff;
  --header-background: #ffffff;
  --aside-background: #ffffff;
  --dropdown-background: #ffffff;
  --input-background: #ffffff;
  --dialog-background: #ffffff;
  --popover-background: #ffffff;
  --tooltip-background: #303133;
  --mask-background: rgba(0, 0, 0, 0.5);

  /* 文字颜色 */
  --text-color: #303133;
  --text-color-secondary: #606266;
  --text-color-placeholder: #C0C4CC;
  --link-color: #409EFF;
  --title-color: #17233d;
  --subtitle-color: #515a6e;

  /* 边框和分割线 */
  --border-color: #DCDFE6;
  --border-color-light: #E4E7ED;
  --border-color-lighter: #EBEEF5;
  --border-color-extra-light: #F2F6FC;

  /* 交互颜色 */
  --hover-color: #f5f7fa;
  --active-color: #ecf5ff;
  --menu-hover: #ecf5ff;
  --menu-active: #409EFF;
  --disabled-color: #C0C4CC;
  --disabled-background: #F5F7FA;

  /* 阴影 */
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, .12);
  --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .24);
  --box-shadow-card: 0 1px 4px rgba(0, 21, 41, .08);

  /* 图表相关 */
  --chart-background: #ffffff;
  --chart-text-color: #303133;
  --chart-axis-line: #E4E7ED;
  --chart-grid-line: #EBEEF5;
  --chart-tooltip-background: #ffffff;
  --chart-legend-text: #606266;

  /* 特殊组件颜色 */
  --tag-info-color: #909399;
  --tag-primary-color: #409EFF;
  --tag-success-color: #67C23A;
  --tag-warning-color: #E6A23C;
  --tag-danger-color: #F56C6C;
}

/* 深色主题 */
html[data-theme='dark'] {
  /* 主色调 */
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;

  /* 背景色 */
  --background-color: #141414;
  --card-background: #1e1e1e;
  --header-background: #1e1e1e;
  --aside-background: #1e1e1e;
  --dropdown-background: #1e1e1e;
  --input-background: #2d2d2d;
  --dialog-background: #1e1e1e;
  --popover-background: #1e1e1e;
  --tooltip-background: #303133;
  --mask-background: rgba(0, 0, 0, 0.7);

  /* 文字颜色 */
  --text-color: #ffffff;
  --text-color-secondary: #909399;
  --text-color-placeholder: #606266;
  --link-color: #409EFF;
  --title-color: #ffffff;
  --subtitle-color: #909399;

  /* 边框和分割线 */
  --border-color: #303030;
  --border-color-light: #363636;
  --border-color-lighter: #404040;
  --border-color-extra-light: #484848;

  /* 交互颜色 */
  --hover-color: #2d2d2d;
  --active-color: #363636;
  --menu-hover: #2d2d2d;
  --menu-active: #409EFF;
  --disabled-color: #606266;
  --disabled-background: #2d2d2d;

  /* 阴影 */
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, .3);
  --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .5);
  --box-shadow-card: 0 1px 4px rgba(0, 0, 0, .3);

  /* 图表相关 */
  --chart-background: #1e1e1e;
  --chart-text-color: #ffffff;
  --chart-axis-line: #303030;
  --chart-grid-line: #303030;
  --chart-tooltip-background: #2d2d2d;
  --chart-legend-text: #909399;

  /* 特殊组件颜色 */
  --tag-info-color: #909399;
  --tag-primary-color: #409EFF;
  --tag-success-color: #67C23A;
  --tag-warning-color: #E6A23C;
  --tag-danger-color: #F56C6C;
}

/* Element UI 组件主题适配 */
html[data-theme='dark'] {
  /* 基础布局组件 */
  .el-container {
    background-color: var(--background-color);
  }

  .el-header {
    background-color: var(--header-background);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
  }

  .el-aside {
    background-color: var(--aside-background);
    border-right: 1px solid var(--border-color);
  }

  .el-main {
    background-color: var(--background-color);
  }

  .el-footer {
    background-color: var(--header-background);
    border-top: 1px solid var(--border-color);
  }

  /* 导航组件 */
  .el-menu {
    background-color: var(--aside-background) !important;
    border-right: none;
    color: var(--text-color);
  }

  .el-menu--horizontal {
    border-bottom: 1px solid var(--border-color);
  }

  .el-menu-item,
  .el-submenu__title {
    color: var(--text-color) !important;
    background-color: var(--aside-background) !important;

    i {
      color: var(--text-color);
    }

    &:hover {
      background-color: var(--menu-hover) !important;
    }

    &.is-active {
      color: var(--menu-active) !important;
      background-color: var(--menu-hover) !important;
    }
  }

  .el-submenu .el-menu {
    background-color: var(--aside-background) !important;
  }

  .el-submenu .el-menu-item {
    background-color: var(--aside-background) !important;
    min-width: auto !important;

    &:hover {
      background-color: var(--menu-hover) !important;
    }

    &.is-active {
      color: var(--menu-active) !important;
    }
  }

  /* 表单组件 */
  .el-form-item__label {
    color: var(--text-color);
  }

  .el-form-item__error {
    color: var(--danger-color);
  }

  .el-input__inner,
  .el-textarea__inner {
    background-color: var(--input-background);
    border-color: var(--border-color);
    color: var(--text-color);

    &:hover {
      border-color: var(--primary-color);
    }

    &:focus {
      border-color: var(--primary-color);
    }

    &::placeholder {
      color: var(--text-color-placeholder);
    }
  }

  .el-input__icon {
    color: var(--text-color-secondary);
  }

  .el-input.is-disabled .el-input__inner {
    background-color: var(--disabled-background);
    border-color: var(--border-color);
    color: var(--disabled-color);
  }

  /* 按钮 */
  .el-button {
    &--default {
      background-color: var(--card-background);
      border-color: var(--border-color);
      color: var(--text-color);

      &:hover,
      &:focus {
        background-color: var(--hover-color);
        border-color: var(--primary-color);
        color: var(--primary-color);
      }
    }

    &--primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      color: #ffffff;

      &:hover,
      &:focus {
        background-color: #66b1ff;
        border-color: #66b1ff;
      }
    }

    &--success {
      background-color: var(--success-color);
      border-color: var(--success-color);
      color: #ffffff;
    }

    &--warning {
      background-color: var(--warning-color);
      border-color: var(--warning-color);
      color: #ffffff;
    }

    &--danger {
      background-color: var(--danger-color);
      border-color: var(--danger-color);
      color: #ffffff;
    }

    &--info {
      background-color: var(--info-color);
      border-color: var(--info-color);
      color: #ffffff;
    }

    &.is-disabled {
      background-color: var(--disabled-background);
      border-color: var(--border-color);
      color: var(--disabled-color);
    }
  }

  /* 表格 */
  .el-table {
    background-color: var(--card-background);
    border-color: var(--border-color);
    color: var(--text-color);

    th.el-table__cell {
      background-color: var(--table-header-background);
      border-bottom: 1px solid var(--border-color);
      color: var(--text-color);
      font-weight: 600;
    }

    td.el-table__cell {
      border-bottom: 1px solid var(--border-color);
      color: var(--text-color);
    }

    tr {
      background-color: var(--card-background);

      &:hover > td.el-table__cell {
        background-color: var(--hover-color);
      }
    }

    .el-table__body tr.current-row > td.el-table__cell {
      background-color: var(--hover-color);
    }
  }

  /* 表格内的按钮和标签样式 */
  .el-table .el-button {
    margin: 0 4px;
  }

  .el-table .el-tag {
    margin: 0 4px;
  }

  /* 确保表格内的文字颜色跟随主题 */
  .el-table .cell {
    color: var(--text-color);
  }

  /* 分页 */
  .el-pagination {
    color: var(--text-color);

    button {
      background-color: var(--card-background);
      color: var(--text-color);

      &:disabled {
        background-color: var(--disabled-background);
        color: var(--disabled-color);
      }
    }

    .el-pager li {
      background-color: var(--card-background);
      color: var(--text-color);

      &.active {
        background-color: var(--primary-color);
        color: #ffffff;
      }

      &:hover {
        color: var(--primary-color);
      }
    }
  }

  /* 对话框 */
  .el-dialog {
    background-color: var(--dialog-background);
    box-shadow: var(--box-shadow);

    .el-dialog__title {
      color: var(--text-color);
    }

    .el-dialog__body {
      color: var(--text-color);
    }

    .el-dialog__header {
      border-bottom: 1px solid var(--border-color);
      background-color: var(--dialog-background);
    }

    .el-dialog__footer {
      border-top: 1px solid var(--border-color);
      background-color: var(--dialog-background);
    }
  }

  /* 卡片 */
  .el-card {
    background-color: var(--card-background);
    border-color: var(--border-color);
    color: var(--text-color);

    .el-card__header {
      border-bottom: 1px solid var(--border-color);
    }
  }

  /* 标签 */
  .el-tag {
    background-color: var(--card-background);
    border-color: var(--border-color);
    color: var(--text-color);

    &.el-tag--info {
      background-color: var(--tag-info-color);
      border-color: var(--tag-info-color);
      color: #ffffff;
    }

    &.el-tag--success {
      background-color: var(--tag-success-color);
      border-color: var(--tag-success-color);
      color: #ffffff;
    }

    &.el-tag--warning {
      background-color: var(--tag-warning-color);
      border-color: var(--tag-warning-color);
      color: #ffffff;
    }

    &.el-tag--danger {
      background-color: var(--tag-danger-color);
      border-color: var(--tag-danger-color);
      color: #ffffff;
    }
  }

  /* 下拉菜单 */
  .el-dropdown-menu {
    background-color: var(--dropdown-background);
    border-color: var(--border-color);
    box-shadow: var(--box-shadow);

    .el-dropdown-menu__item {
      color: var(--text-color);

      &:hover {
        background-color: var(--hover-color);
        color: var(--primary-color);
      }

      &.is-disabled {
        color: var(--disabled-color);
      }
    }
  }

  /* 日期选择器 */
  .el-date-picker,
  .el-date-range-picker {
    background-color: var(--dropdown-background);
    border-color: var(--border-color);
    color: var(--text-color);

    .el-picker-panel__content {
      background-color: var(--dropdown-background);
    }

    .el-date-picker__header {
      color: var(--text-color);

      .el-picker-panel__icon-btn,
      .el-date-picker__header-label {
        color: var(--text-color);

        &:hover {
          color: var(--primary-color);
        }
      }
    }

    .el-date-table {
      background-color: var(--dropdown-background);

      th {
        color: var(--text-color-secondary);
        border-bottom: 1px solid var(--border-color);
      }

      td {
        background-color: var(--dropdown-background);
        color: var(--text-color);

        span {
          color: var(--text-color);
        }

        &.next-month,
        &.prev-month {
          color: var(--text-color-secondary);

          span {
            color: var(--text-color-secondary);
          }
        }

        &.available:hover {
          color: var(--primary-color);

          span {
            color: var(--primary-color);
            background-color: var(--hover-color);
          }
        }

        &.in-range div {
          background-color: var(--hover-color);
        }

        &.in-range:hover div {
          background-color: var(--active-color);
        }

        &.current:not(.disabled) {
          color: #ffffff;
          
          span {
            color: #ffffff;
            background-color: var(--primary-color);
          }
        }

        &.today {
          color: var(--primary-color);
          
          span {
            color: var(--primary-color);
            border-color: var(--primary-color);
          }
        }

        &.disabled {
          background-color: var(--disabled-background);
          color: var(--disabled-color);
          
          span {
            color: var(--disabled-color);
            background-color: var(--disabled-background);
          }
        }

        &.selected span {
          background-color: var(--primary-color);
          color: #ffffff;
        }

        &.start-date span,
        &.end-date span {
          background-color: var(--primary-color);
          color: #ffffff;
        }
      }
    }

    .el-date-range-picker__content {
      background-color: var(--dropdown-background);

      .el-date-range-picker__header {
        color: var(--text-color);
      }
    }

    .el-picker-panel__footer {
      background-color: var(--dropdown-background);
      border-top: 1px solid var(--border-color);

      .el-button--text {
        color: var(--text-color);

        &:hover {
          color: var(--primary-color);
        }
      }
    }

    /* 时间选择器部分 */
    .el-time-panel {
      background-color: var(--dropdown-background);
      border-color: var(--border-color);

      .el-time-panel__content {
        background-color: var(--dropdown-background);

        &::after,
        &::before {
          border-color: var(--border-color);
        }
      }

      .el-time-spinner__item {
        color: var(--text-color);

        &:hover {
          background-color: var(--hover-color);
        }

        &.active {
          color: var(--primary-color);
          font-weight: bold;
        }

        &.disabled {
          color: var(--disabled-color);
        }
      }

      .el-time-panel__footer {
        border-top: 1px solid var(--border-color);
        background-color: var(--dropdown-background);

        .el-time-panel__btn {
          color: var(--text-color);

          &:hover {
            color: var(--primary-color);
          }

          &.confirm {
            color: var(--primary-color);
          }
        }
      }
    }
  }

  /* 日期选择器分隔符和输入框 */
  .el-date-editor {
    background-color: var(--input-background);
    border-color: var(--border-color);

    .el-range-separator {
      color: var(--text-color);
    }

    .el-range-input {
      color: var(--text-color);
      background-color: var(--input-background);

      &::placeholder {
        color: var(--text-color-placeholder);
      }
    }

    .el-range__icon,
    .el-range__close-icon {
      color: var(--text-color-secondary);

      &:hover {
        color: var(--primary-color);
      }
    }

    &:hover {
      border-color: var(--primary-color);
    }

    &.is-active {
      border-color: var(--primary-color);
    }
  }

  /* 图表容器 */
  .chart-container {
    background-color: var(--chart-background) !important;

    .echarts {
      background-color: var(--chart-background) !important;
    }
  }

  /* 图表卡片 */
  .chart-card {
    background-color: var(--card-background);

    .chart-container {
      background-color: var(--chart-background) !important;
    }

    .chart-title {
      color: var(--text-color);
    }
  }

  /* ECharts 相关容器 */
  .echarts-for-react,
  .ev-chart {
    background-color: var(--chart-background) !important;
  }

  /* 图表工具提示 */
  .el-tooltip__popper {
    &.is-dark {
      background-color: var(--tooltip-background) !important;
      color: #ffffff;
    }

    &.is-light {
      background-color: var(--popover-background) !important;
      border-color: var(--border-color);
      color: var(--text-color);
    }
  }

  /* 弹出框 */
  .el-popover {
    background-color: var(--popover-background);
    border-color: var(--border-color);
    color: var(--text-color);
  }

  .el-tooltip__popper {
    background-color: var(--tooltip-background) !important;
    color: #ffffff;
  }

  /* 消息提示 */
  .el-message {
    background-color: var(--card-background);
    border-color: var(--border-color);
    color: var(--text-color);

    &.el-message--success {
      background-color: rgba(103, 194, 58, 0.1);
      border-color: var(--success-color);
    }

    &.el-message--warning {
      background-color: rgba(230, 162, 60, 0.1);
      border-color: var(--warning-color);
    }

    &.el-message--error {
      background-color: rgba(245, 108, 108, 0.1);
      border-color: var(--danger-color);
    }

    &.el-message--info {
      background-color: rgba(144, 147, 153, 0.1);
      border-color: var(--info-color);
    }
  }
  .system-title {
    color: var(--text-color);
  }

  /* 加载中 */
  .el-loading-mask {
    background-color: var(--mask-background);

    .el-loading-spinner {
      .el-loading-text {
        color: var(--text-color);
      }

      .path {
        stroke: var(--primary-color);
      }
    }
  }

  /* 头像组件样式 */
  .el-avatar {
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50% !important;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease;
  }

  .el-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .el-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 确保所有头像都是圆形的 */
  .el-avatar,
  .el-avatar--circle,
  .el-avatar--large,
  .el-avatar--medium,
  .el-avatar--small {
    border-radius: 50% !important;
  }

  .el-table, .el-table__expanded-cell {
    border-color: var(--border-color);
    text-align: left !important;
    background-color: var(--card-background);
}
}

/* 全局过渡动画 */
* {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
} 